/**
 * 热门品牌
 * **/
import './index.scss'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import Skeleton from '../Skeleton'
import LazyLoad from '../LazyLoad'
import { getBrand } from '../../api/home'
import { useEffect, useState } from 'react'
export default () => {
    /**
     * 初始面板
     * **/
    const defaultList = (
        <>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
        </>
    )
    /**
     * 存放热门品牌的数据
     * **/
    const [list, setList] = useState([])
    /**
     * 当前页码
     * **/
    const [page, setPage] = useState(0)
    /**
     * 总共多少页
     * **/
    const [pages, setPages] = useState(0)
    /**
     * 获取热门品牌的数据
     * **/
    const getList = async () => {
        try {
            const data = await getBrand(10)
            setList(data)
            setPages(Math.ceil(data.length / 5))
        } catch (error) { }
    }
    useEffect(() => {
        getList()
    }, [])
    /**
     * 计算页码
     * **/
    const pageNo = (to) => {
        setPage(Math.min(pages - 1, Math.max(page + to, 0)))
    }
    return (
        <div className="brand">
            <div className="top">
                <div className="left">
                    <h1>热门品牌</h1>
                    <p><span>国际经典</span>&emsp;<span>品质保证</span></p>
                </div>
                <div className='right'>
                    <p className={page == 0 ? '' : 'active'} onClick={() => pageNo(-1)}><LeftOutlined></LeftOutlined></p>
                    <p className={page == pages - 1 ? '' : 'active'} onClick={() => pageNo(1)}><RightOutlined></RightOutlined></p>
                </div>
            </div>
            <LazyLoad load={getList}>
                <ul style={{transform:`translateX(${-page*100}%)`}}>
                    {
                        list.length ? list.map(item => (
                            <li>
                                <img src={item.picture} alt="" />
                            </li>
                        )) : defaultList
                    }
                </ul>
            </LazyLoad>
        </div>
    )
}
